<template>
  <div>


    <div class="img f-d-c f-j-a-c">
    <svg-icon name="icon-fanhui" @click="gobakc" class="gobakcnow click"></svg-icon>


      <userAvatar 
          :divWidth="96"
          :imgWidth="90"
          :dvWidht="24"
          :userImgs="userInfo.avatar && userType == 1 ? userInfo.avatar : oterinf.avatar"
          :showDv="userType == 1 ? userInfo.staus == 1 : oterinf.staus == 1"
      ></userAvatar>

      <span>{{userType==1?userInfo.name:oterinf.name }}</span>
      <span>{{ totalpage }}个收藏</span>
    </div>
    <waterfall @totalslist="totalslist" :userType="4"></waterfall>
  </div>
</template>

<script>
import userAvatar from "@/components/userAvatar.vue";
import waterfall from "./waterfall.vue";
import { useRouter } from "vue-router";
import { getoter } from "@/axios/api.js";

import {
  computed,
  defineComponent,
  onMounted,
  reactive,
  toRefs,
  getCurrentInstance,
  onUnmounted,
} from "vue";
import { useStore } from "vuex";
export default defineComponent({
  components: {
    waterfall,
    userAvatar
  },
  setup() {
    const router = useRouter();
    const { proxy } = getCurrentInstance();
    let store = useStore();
    let data = reactive({
      totalpage: 0,
      oterinf:"", //他人用户信息
      phone:"", //他人手机号码
      userType:99, //用户类型
    });
    let userInfo = computed(() => {
      return store.state.minUserInfo;
    });

    let getgetoter = () => {
      getoter({
        phone: data.phone.toString(),
      }).then((res) => {
        data.oterinf = res.data;
        setChuanzuolist();
        // data.yonhuL[1].num = res.data.fans;
      });
    };

    onMounted(() => {
      data.userType = router.currentRoute.value.query.id;
      data.phone = router.currentRoute.value.query.phone;
      if(data.userType == 0) {
        getgetoter();
      };
    });
    onUnmounted(() => {});
    // 返回
    let gobakc =() =>{
      router.back()
    }
    // 获取数量
    let totalslist = (val) => {
      console.log(val);
      data.totalpage = val;
    };
    return {
      gobakc,
      totalslist,
      userInfo,
      ...toRefs(data),
    };
  },
});
</script>
<style lang="scss" scoped>
.gobakcnow{
  position: absolute;
  top: 50px;
  left: 60px;
}
.img {
  position: relative;

  .gobakcnow{
    font-size: 24px;
    position: absolute;
    top:0;
  }

  > img {
    width: 90px;
    border-radius: 50%;
  }
  > span {
    margin-top: 15px;

    &:first-child {
      display: block;
      font-size: 24px;
      font-family: Microsoft YaHei-Bold, Microsoft YaHei;
      font-weight: 700;
      color: #000000;
    }
    &:last-child {
      display: block;
      font-size: 14px;
      font-family: Microsoft YaHei-Regular, Microsoft YaHei;
      font-weight: 400;
      color: #000000;
      padding-bottom: 20px;
    }
  }
}
</style>
